<template>
	<!-- 使用优惠券 -->
	<view class="use_coupon_container">
		<view class="coupon_list">
			<view class="coupon_item" 
				v-for="(item, index) of couponD" 
				:key="index"
				:class="{'notFirstCouponItem': index != 0}"
				>
				<view class="coupon_item_value_limit">
					<view class="coupon_item_value">
						￥{{ item.value }}
					</view>
					<view class="coupon_item_limit" v-if="item.limit != 0">
						满{{item.limit}}可用
					</view>
					<view class="coupon_item_limit" v-if="item.limit == 0">
						无门槛
					</view>
				</view>
				<view class="coupon_item_info">
					<view class="coupon_item_info_title">
						店铺优惠券
					</view>
					<view class="coupon_item_info_expire_use">
						<view class="coupon_item_info_expire">
							到期：{{ item.expireTime }}
						</view>
						<view class="coupon_item_info_use_btn">
							<radio-group @change="radioChange(item)">
								<radio :value="item.coupon_id" :checked="item.coupon_id == selectCouponId"/>
							</radio-group>
						</view>
					</view>
					<view class="coupon_item_info_tip">
						该券仅限制在店铺内可用
					</view>
				</view>
			</view>
		</view>
		<!-- 底部悬浮确定按钮 -->
		<view class="confirm_btn">
			<button 
				type="default" 
				class="confirm_btn_B" 
				@click="choseCouponHandle">
				选择优惠券
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue"
import dayJs from "dayjs";

// 可用优惠券数据 
let couponD = ref([]);

// 单选框选中的优惠券ID
let selectCouponId = ref("");

onMounted(()=>{
	getCouponData();
})

// 单选框选择触发
function radioChange(item){
	selectCouponId.value = item.coupon_id;
}

// 获取可用优惠券信息
function getCouponData(){
	couponD.value = JSON.parse(uni.getStorageSync("useAbleCoupon"));
	
	// 遍历处理过期时间
	for(let item of couponD.value){
		item["expireTime"] = dayJs(item.expireTime).format("YYYY-MM-DD");
	}
}

// 选择优惠券处理器
function choseCouponHandle(){
	if(selectCouponId.value == ""){
		uni.showToast({
			title: '请先选择优惠券',
			icon: 'none'
		});
		return 1;
	}
	
	// 修改本地存储中的订单信息
	let orderInfo = JSON.parse(uni.getStorageSync("orderInfo"));
	orderInfo.selectedCoupon = true;
	
	// 取出选择的优惠券信息
	let choseCouponInfo = {};
	for(let item of couponD.value){
		if(item.coupon_id == selectCouponId.value){
			choseCouponInfo = item;
		}
	}
	
	// 添加一个优惠券价值字段
	orderInfo["couponInfo"] = choseCouponInfo;
	// 更新本地存储中的订单优惠券信息
	uni.setStorageSync("orderInfo", JSON.stringify(orderInfo));
	
	// 返回订单确定页面
	uni.navigateBack();
}

</script>

<style lang="scss" scoped>

.coupon_item{
	display: flex;
	border: solid #ff989a 1px;
	border-radius: 15rpx;
	background-color: #fff;
	padding: 15rpx;
	width: 90%;
	margin: 0 auto;
}

.coupon_item_value_limit{
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: red;
	font-size: 12px;
}

.coupon_item_value{
	font-size: 22px;
}

.coupon_item_limit{
	padding-top: 10rpx;
}

.coupon_item_info{
	width: 70%;
	font-size: 13px;
	padding: 10px 30rpx;
}

.coupon_item_info_use_btn_B{
	width: 130rpx;
	height: 60rpx;
	font-size: 13px;
	margin-left: 50rpx;
	background-color: #ff6d19;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	left: 10rpx;
}

.coupon_item_info_expire_use{
	padding-top: 10rpx;
	display: flex;
	flex-wrap: nowrap;
	min-width: max-content;
	align-items: center;
	// border: solid red 1px;
	justify-content: space-between;
}

.coupon_item_info_tip{
	padding-top: 10rpx;
}

.notFirstCouponItem{
	margin-top: 20rpx;
}

.confirm_btn{
	position: fixed;
	bottom: 0px;
	width: 100vw;
	z-index: 999;
}
.confirm_btn_B{
	background-color: #ff6c23;
	color: white;
}
</style>
